<!--
 * @Descripttion:
 * @Author: caijj
 * @Date: 2021-02-04 10:15:28
 * @LastEditors: caijj
 * @LastEditTime: 2021-02-04 10:35:17
-->
<template>
  <BasicLayout>
    <template #wrapper>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <el-table-column v-if="selectionShow" type="selection" width="50" />
        <template v-for="column in columns">
          <el-table-column
            v-if="column.slot"
            :key="column.key"
            :prop="column.prop"
            :label="column.label"
            :width="column.width || 'auto'"
            :min-width="column.minWidth || 'auto'"
            :fixed="column.fixed"
          >
            <!-- :align="column.align || 'center'" -->
            <template slot-scope="scope">
              <slot
                :name="column.prop"
                :item="scope.row"
                :$index="scope.$index"
              />
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :key="column.key"
            :prop="column.prop"
            :label="column.label"
            :width="column.width || 'auto'"
            :min-width="column.minWidth || 'auto'"
            :formatter="column.formatter"
          />
          <!-- :show-overflow-tooltip="isEllipsis(column.prop)" -->
        </template>
        <!-- <el-table-column prop="name" label="菜单名称" width="180">
        </el-table-column>
        <el-table-column prop="address" label="按钮权限">

        </el-table-column> -->
      </el-table>
    </template>
  </BasicLayout>
</template>
<script>
export default {
  components: {},
  props: {
    selectionShow: { type: Boolean, default: false },
    tableData: { default: () => [], type: Array, required: true }, // 数据项
    columns: { default: () => [], type: Array, required: true } // 列表项
  },
  data() {
    return {};
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>
